<div id="externalDeviceEditDiv">
	<div class="hint-content step two">
		<div class="step-heads">
			<div class="step-head" data-no="1" style="height: 40px;">
				<div class="step-title">外接设备基本信息</div>
			</div>
			<div class="step-head " data-no="2" style="height: 40px;">
				<div class="step-title">外接设备参数设置</div>
			</div>
		</div>
		<div class="step-content" style="height: 370px;">
			<div class="step-content-item" data-on="1" style="padding: 10px;">
				<div class="one-case" style="width: 100%;">
					<div class="hint-text">
						<label>设备名称：</label> <input type="text" class="k-textbox"
							data-bind="value:deviceName" maxlength="25"
							validationMessage="设备名称为必填且不能包含特殊字符" required
							pattern="^[\u4e00-\u9fa5A-Za-z0-9-_]*$" />
					</div>
					<div class="hint-text">
						<label>设备编号：</label> <input type="text" class="k-textbox"
							data-bind="value:deviceCode" maxlength="50"
							validationMessage="设备编号为必填且不能包含特殊字符" placeholder="系统自动生成" disabled="disabled"
							pattern="^[A-Za-z0-9-_]*$" />
					</div>
					<div class="hint-text">
						<label>设备类型：</label> <input type="text" id="deviceType"
							data-bind="value:deviceType" />
					</div>
					<div class="hint-text">
						<label>设备机号：</label> <input type="text" id="deviceNumber"
							data-bind="value:deviceNumber" maxlength="5"
							validationMessage="设备机号只能为纯数字" required pattern="^[0-9]*$" /><span>(100~127)</span>
					</div>
					<div class="hint-text">
						<label>IP地址：</label> <input type="text" class="k-textbox"
							data-bind="value:ipAddress"
							validationMessage="Ip地址格式只能为XXX.XXX.XXX.XXX" required
							pattern="^(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[0-9]{1,2})(\.(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[0-9]{1,2})){3}$">
					</div>
					<div class="hint-text">
						<label>端口号：</label> <input type="text" 
							data-bind="value:port" validationMessage="端口号只能为纯数字" required  id="port"
							pattern="^[0-9]*$" maxlength="5">
					</div>
					<div class="hint-text">
						<label>备注：</label>
						<textarea class="k-textbox"
							style="width:495px; height: 150px;resize:none;"
							data-bind="value:remark" maxlength="200"></textarea>
					</div>
				</div>
			</div>
			<div class="step-content-item" data-on="2" style="padding: 10px;" id="loadExtDeviceParams">
			</div>
		</div>
		<div class="basicInfo-btn">
			<button class="save" data-bind="click:save_info">保存</button> <button class="cancel"
				data-bind="click:closeWindow">取消</button>
		</div>
	</div>
</div>
<div style="display: none;" id="extDeviceExtension">
		
		<div id="tempCardChargParams">
			<div class="hint-text">
				<label>设备读头：</label> <input type="text" id="readHead"
					data-bind="value:readHead1" maxlength="2"
					validationMessage="设备读头只能为纯数字" required pattern="^[0-9]*$" />
			</div>
			<div class="hint-text">
				<label>卡扇区号：</label> <input type="text" id="sectorNumber"
					data-bind="value:sectorNumber1" maxlength="2"
					validationMessage="卡扇区号只能为纯数字" required pattern="^[0-9]*$" />
			</div>
			<div class="hint-text">
				<label>开始扇区号：</label> <input type="text" id="startSectorNumber"
					data-bind="value:startSectorNumber1" maxlength="2"
					validationMessage="开始扇区号只能为纯数字" required pattern="^[0-9]*$" />
			</div>
		</div>
	</div>

<script>
	var extDeviceEditJs = null;
	$(document).ready(
			function() {
				var targetObj = $("#externalDeviceEditDiv");
				targetObj.find('.step-head').bind(
						'click',
						function(e) {
							if ($(this).hasClass('active')) {
								return;
							}
							var no = $(this).attr('data-no');
							$('.step-head').removeClass('active');
							$('.step-head').removeClass('completed');

							$(this).prevAll().addClass('completed');
							$(this).addClass('active');
							$('.step-content .step-content-item').fadeOut(200);
							$(
									'.step-content .step-content-item[data-on="'
											+ no + '"]').fadeIn(200);
						});
				targetObj.find('.step-head:first').trigger("click");
				extDeviceEditJs = new externalDeviceEdit(targetObj);
			});
</script>